<template>
  <div class="analy_echarts" id="analyMapXXS" ref="analyMapXXS"></div>
</template>

<script>
// import * as echarts from 'echarts'
import pyxqcl from '@/assets/GeoJSON/pyxqcl.json'
import xxs from '@/assets/GeoJSON/xxs.json'
import hdzz from '@/assets/GeoJSON/hdzz.json'
import qbx from '@/assets/GeoJSON/qbx.json'
import szz from '@/assets/GeoJSON/szz.json'
import ywz from '@/assets/GeoJSON/ywz.json'
import zlx from '@/assets/GeoJSON/zlx.json'
import yxnmc from '@/assets/GeoJSON/yxnmc.json'
export default {
  name: 'analyMapXXS',
  data() {
    return {
      mapData: [
        {
          name: '红旗区',
          code: '410725005',
          value: 15
        },
        {
          name: '卫滨区',
          code: '410725007',
          value: 35
        },
        {
          name: '凤泉区',
          code: '410725006',
          value: 30
        },
        {
          name: '牧野区',
          code: '410725004',
          value: 50
        },
        {
          name: '新乡县',
          code: '410725008',
          value: 100
        },
        {
          name: '获嘉县',
          code: '410725019',
          value: 30
        },
        {
          name: '原阳县',
          code: '410725008',
          value: 20
        },
        {
          name: '延津县',
          code: '410725019',
          value: 80
        },
        {
          name: '封丘县',
          code: '410725008',
          value: 10
        },
        {
          name: '长垣市',
          code: '410725019',
          value: 80
        },
        {
          name: '卫辉市',
          code: '410725008',
          value: 20
        },
        {
          name: '辉县市',
          code: '410725019',
          value: 20
        }
      ],
      MapAdressName: 'XZQMC',
      mapVillage: '/business/statistics/home',
      center: [37747564, 3876624]
    }
  },
  mounted() {
    this.drawMap()
  },
  methods: {
    drawMap() {
      var myChart = this.$echarts.init(document.getElementById('analyMapXXS'))
      var name = 'xx'
      //let mapCenter = center
      //   if (!mapCenter) {
      //     mapCenter = this.center
      //   }
      //let MapJSON = mapjson
      this.$echarts.registerMap(name, xxs) //注册地图
      var option = {
        tooltip: {
          trigger: 'item',
          borderColor: '#fff',
          textStyle: {
            color: '#1B7DFF'
          },
          backgroundColor: 'rgba(255,255,255,0.8)',
          formatter: '{b} : {c}'
        },
        backgroundColor: '',
        visualMap: {
          type: 'continuous',
          min: 0,
          max: 50,
          left: 20,
          bottom: 30,
          text: '',
          orient: 'horizontal',
          inverse: true,
          itemWidth: 10,
          itemHeight: 300,
          calculable: false,
          inRange: {
            color: ['#C5DEFF', '#1B7DFF']
          },
          show: true
        },
        // geo: {
        //   map: name, //必须以注册的地图名称一致
        //   roam: true,
        //     nameProperty: 'XZQMC',
        //   label: {
        //         normal: {
        //             show: true
        //         },
        //         emphasis: {
        //             textStyle: {
        //                 color: '#fff'
        //             }
        //         }
        //     },
        //   itemStyle: {
        //     //地图区块颜色
        //     normal: {
        //       areaColor: 'rgba(47,105,148,.5)',
        //       borderColor: '#FFFFFF', //线
        //       shadowColor: 'rgba(47,105,148,.5)', //外发光
        //       shadowBlur: 20,
        //     },
        //     emphasis: {
        //       areaColor: 'rgb(47,105,148)', //悬浮区背景
        //     },
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       areaColor: '#123555',
        //       shadowColor: '#26587A',
        //       shadowBlur: 10,
        //     },
        //   },
        // },
        series: [
          {
            type: 'map',
            map: name,
            left: 10,
            //nameProperty: adressName,
            //center: mapCenter,
            //coordinateSystem: 'geo',
            roam: true, //是否可以
            zoom: 1.2,
            aspectScale: 1,
            itemStyle: {
              borderColor: '#FFFFFF',
              borderWidth: 3
            },
            label: {
              normal: {
                color: '#FFFFFF',
                fontSize: 14,
                show: true
              },
              emphasis: {
                color: '#FFFFFF',
                fontSize: 14,
                show: true
              }
            },
            data: this.mapData
          }
        ]
      }
      myChart.setOption(option)
      //多图表自适应
      window.addEventListener('resize', function() {
        myChart.resize()
      })
      //   myChart.on('click', echartsMapClick)
      //   var _this = this
      //   function echartsMapClick(params) {
      //     let data = {
      //       code: params.data.code
      //     }
      //     _this.getAction(_this.mapVillage, data).then(res => {
      //       console.log('res=>', res)
      //     })
      //     //点击地块关闭循环循环展示
      //     let villageCenter = []
      //     console.log('params=>', params)
      //     _this.MapAdressName = 'ZLDWMC'
      //     _this.$emit('isVillageBack')
      //     switch (params.name) {
      //       case '师寨镇':
      //         villageCenter = [37753828, 3885239]
      //         _this.drawMap(this.mapData, szz, _this.MapAdressName, villageCenter)
      //         break
      //       case '桥北乡':
      //         villageCenter = [37741197, 3873863]
      //         _this.drawMap(this.mapData, qbx, _this.MapAdressName, villageCenter)
      //         break
      //       case '祝楼乡':
      //         villageCenter = [37745616, 3880820]
      //         _this.drawMap(this.mapData, zlx, _this.MapAdressName, villageCenter)
      //         break
      //       case '原武镇':
      //         villageCenter = [37755213, 3879698]
      //         _this.drawMap(this.mapData, ywz, _this.MapAdressName, villageCenter)
      //         break
      //       case '韩董庄镇':
      //         villageCenter = [37755015.387983]
      //         _this.drawMap(this.mapData, hdzz, _this.MapAdressName, villageCenter)
      //         break
      //       case '原阳县农牧场':
      //         villageCenter = [37755015.387983]
      //         _this.drawMap(this.mapData, yxnmc, _this.MapAdressName, villageCenter)
      //         break
      //     }
      //   }
      // });
    }
  }
}
</script>

<style lang="less" scoped>
.analy_echarts {
  width: 100%;
  height: 100%;
  // div {
  //   height: 100%;
  //   canvas {
  //     height: 100%;
  //   }
  // }
}
</style>
